<template>
  <div class="statistics--siteUser">
    <!-- 数据区域 -->
    <information
      :class="isCollect == 0 ? 'totalHide' : isCollect == 1 ? 'totalShow' : ''"
      :data="LocationTotal"
    />
    <!-- 排行榜/筛选 -->
    <seniority
      :region="false"
      :storeVue="{
        name: 'worksingleLocationList',
        commit: 'set_LocationList',
        del: 'del_LocationList',
      }"
      :regionName="getParmas.regionName + '排行榜'"
      @DelFilterList="DelFilterList"
    />
    <!-- 排序 -->
    <filter-type
      :region="false"
      :storeVue="{ name: 'worksingleLocationList', commit: 'set_LocationList' }"
      @complete="_complete()"
      :FilterTypeList="FilterTypeList"
      :activateField="2"
    />
    <!-- 大区/时间 -->
    <filter-time
      @complete="_complete()"
      :region="false"
      :storeVue="{ name: 'worksingleLocationList', commit: 'set_LocationList' }"
    />
    <!-- BD搜索 -->
    <filter-site
      :region="false"
      title="请输入BD名称"
      :storeVue="{ name: 'worksingleLocationList', commit: 'set_LocationList' }"
      @complete="_complete()"
    />
    <div class="functional ml-10px">
      <div class="operator" @click="businessFn">
        {{ targetName }} <span class="triangle triangle-down"></span>
      </div>
      <div class="operator ml-22px" @click="sortRank()">
        {{ sortRankList ? "升序" : "降序" }}
        <span
          class="triangle triangle-up"
          :class="sortRankList ? 'triangle-up' : 'triangle-down'"
        ></span>
      </div>
      <div class="serach-icon" @click="serachSite">
        <img
          class="w-20px h-20px"
          src="@/assets/workbench/work/search.png"
          alt=""
        />
      </div>
    </div>
    <div class="location-list">
      <div
        class="location-rows"
        v-for="item in locationScrollList"
        :key="item.id"
      >
        <div class="left-rows">
          <div class="w-18px h-18px mr-13px" v-if="item.id < 3">
            <img
              :src="require(`@/assets/workbench/work/img_${item.id + 1}.png`)"
              alt=""
              class="w-14px h-20px mr-4px"
            />
          </div>
          <div
            class="indexs"
            :class="item.id + 1 < 100 ? 'indexs-two' : 'indexs-three'"
            v-else
          >
            {{ item.id + 1 }}
          </div>
          <span class="location-name">{{ item.username }}</span>
        </div>
        <div class="row">
          <div class="column">
            <span class="num">{{ item.followUpNum }}</span
            ><span class="title">跟进数</span>
          </div>
          <div class="column">
            <span class="num">{{ item.sweepStreetNum }}</span
            ><span class="title">扫街数</span>
          </div>
          <div class="column">
            <span class="num">{{ item.newBusinessOpportunityNum }}</span
            ><span class="title">新增商机</span>
          </div>
          <div class="column">
            <span class="num">{{ item.visitNum }}</span
            ><span class="title">拜访数</span>
          </div>
          <div class="column">
            <span class="num">{{ item.newSettledNum }}</span
            ><span class="title">新增入驻</span>
          </div>
          <div class="column">
            <span class="num">{{ item.reVisitNum }}</span
            ><span class="title">回访数</span>
          </div>
          <div class="column">
            <span class="num">{{ item.newSettlementNum }}</span
            ><span class="title">新增结算</span>
          </div>
          <!-- <div class="column">
            <span class="num">{{ item.tempLibNum }}</span
            ><span class="title">临时库数</span>
          </div> -->
          <div class="column">
            <span class="num">{{ item.privateLibNum }}</span
            ><span class="title">私海数</span>
          </div>
          <div class="column">
            <span class="num">{{
              item.merchantSettledPercent * 100 + "%"
            }}</span
            ><span class="title">商机签约率</span>
          </div>
          <div class="column">
            <span class="num">
              {{ item.avgConversionTime
              }}<span style="font-size: 12px">分钟</span> </span
            ><span class="title">平均转化时长</span>
          </div>
        </div>
      </div>
      <div class="no-content" v-show="locationList.length <= 0">
        <Loading v-show="loadingStatus" size="16px">加载中...</Loading>
        <span v-show="!loadingStatus && locationList.length <= 0"
          >暂无数据</span
        >
      </div>
    </div>
    <div
      class="scrollLoading"
      :class="scrollLoadingStatus ? 'loadingShow' : 'loadingHide'"
    >
      <Loading class="scrollLoadingStatus" size="16px"
        ><span class="text-12px">加载中...</span></Loading
      >
    </div>
    <div class="no-content-loading" v-if="noMoreLoading">
      <span>没有更多了</span>
    </div>
  </div>
</template>

<script>
import bus from "@/config/evenrBus";
import information from "./components/information";
import seniority from "./components/seniority"; //排行榜/筛选
import FilterType from "./components/filtertype"; //排序
import FilterTime from "./components/filtertime.vue"; //大区
// import FilterTime from "./components/filtertimerange.vue"; //(本月/本周/今日版本)
import FilterSite from "./components/filtersite.vue"; //BD搜索
import { data_status } from "@/services/business/dict.js";
import { fetchStatisticsSingleLocation } from "@/services";
import { Loading } from "vant";
import { throttle } from "lodash";
import { getYearMonth } from "@/utils/index";
export default {
  components: {
    information,
    seniority,
    FilterType,
    FilterTime,
    FilterSite,
    Loading,
  },
  data() {
    return {
      locationList: [],
      typelist: {
        0: "bd_sort_field", //工作量-指标
      },
      FilterTypeList: [], //工作量-选择指标数据
      sortRankList: false, //排序
      filtration: null, //保存筛选条件
      getParmas: null, //保存参数
      loadingStatus: true,
      LocationTotal: {}, //数据汇总
      targetName: "新增商机", //指标名称
      defualtTime: getYearMonth(new Date()),
      locationScrollList: [], //滚动加载存放处
      scroll: {
        //滚动大小
        startSize: 0,
        endSize: 20,
      },
      isCollect: "isCollect",
      scrollLoadingStatus: false,
      noMoreLoading: false,
    };
  },
  created() {
    this.getParmas = this.$route.query;
    let parmas = {
      isDesc: "0",
      sortField: 3,
      monthInt: this.defualtTime,
    };
    this.initLocation(parmas); //获取站点BD数据
    this.getLocationTotal(); //获取总数据
  },
  mounted() {
    this.get_data(0); ///工作量-指标
    //监听滚动
    document
      .querySelector(".statistics--siteUser .location-list")
      .addEventListener("scroll", this.scrollLocation);
  },
  methods: {
    getLocationTotal() {
      let LocationTotal = localStorage.getItem("LocationTotal");
      if (LocationTotal) {
        this.LocationTotal = JSON.parse(LocationTotal);
      }
    },
    initLocation(data) {
      let parmas = {
        ...data,
        locationId: this.getParmas.locationId,
      };
      fetchStatisticsSingleLocation(parmas)
        .then((res) => {
          if (this.locationList.length > 0) {
            this.locationList = null;
            this.scroll.startSize = 0;
            this.scroll.endSize = 20;
          }
          res.data = res.data.map((item, index) => {
            item.id = index;
            return item;
          });
          this.locationList = res.data; //暂存所有数据
          //截取数据
          this.locationScrollList = this.locationList.slice(
            this.scroll.startSize,
            this.scroll.endSize
          );
          this.loadingStatus = false; //关闭加载
        })
        .catch(() => {
          this.resetList(); //重置列表
        });
    },
    businessFn() {
      //站点指标
      bus.$emit("work_singleLocationShowType", true);
    },
    DelFilterList() {
      let parmas = this.getSelectedData();
      if (this.sortRankList) {
        parmas.isDesc = "1";
      } else {
        parmas.isDesc = "0";
      }
      this.filtration = parmas;
      this.resetList(); //重置列表
      this.initLocation(parmas);
    },
    serachSite() {
      //站点
      bus.$emit("work_singleLocationShow", true);
    },
    get_data(type) {
      // 商机数据状态
      data_status(this.typelist[type]).then((res) => {
        let packageDta = res;
        // 组装唯一key
        packageDta = packageDta.map((item, index) => {
          item["key"] = this.typelist[type] + index;
          return item;
        });
        if (this.typelist[type] == "bd_sort_field") {
          this.FilterTypeList = packageDta;
        }
      });
    },
    sortRank: throttle(function () {
      //排序
      this.sortRankList = !this.sortRankList;
      let parmas = {
        ...this.filtration,
        isDesc: this.sortRankList ? "1" : "0",
      };
      if (!parmas.sortField) {
        parmas.sortField = 3; //默认选择新增商机
      }
      this.resetList(); //重置列表
      this.initLocation(parmas);
    }, 500),
    _complete() {
      let parmas = this.getSelectedData();
      this.filtration = parmas;
      this.resetList(); //重置列表
      this.initLocation(parmas);
      this.getSelectedDataTargetName(); // 返回选中的指标
    },
    getSelectedData() {
      let list = this.$store.state.work.worksingleLocationList;
      if (list._RegionTimeKeyName && list._RegionTimeKeyName[0]) {
        time = list._RegionTimeKeyName[0].name.replace(/-/g, "").split(" ");
      }
      let parmas = {
        sortField:
          list._statusType && list._statusType[0]
            ? list._statusType[0].type
            : 3, //排序的字段
        monthInt: list.monthInt && list.monthInt[0]?.value,
        dbName:
          list._statusLocation && list._statusLocation[0]
            ? list._statusLocation[0].name
            : null, //站点名称
        isDesc: this.sortRankList ? "1" : "0", //排序
      };
      return parmas;
    },
    getSelectedDataTargetName() {
      let list = this.$store.state.work.worksingleLocationList;
      if (list._statusType && list._statusType[0]) {
        this.targetName = list._statusType[0].name;
      }
    },
    scrollLocation() {
      // 声明dom
      var locationListDom = document.querySelector(
        ".statistics--siteUser .location-list"
      );
      //顶部距离
      var scrollTop = locationListDom.scrollTop;
      if (scrollTop > 60) {
        this.isCollect = 0;
      } else if (this.isCollect != "isCollect") {
        this.isCollect = 1;
      }
      // isCollect
      //可视高度
      var offsetHeight = locationListDom.offsetHeight;
      //滚动高度
      var scrollHeight = locationListDom.scrollHeight;
      //没有数据了
      if (
        this.locationList.length &&
        this.locationScrollList.length == this.locationList.length
      ) {
        this.noMoreLoading = true;
        return;
      }
      if (this.scrollLoadingStatus) return;
      if (
        this.locationList.length &&
        Math.ceil(scrollTop) + offsetHeight > scrollHeight - 1
      ) {
        this.scrollLoadingStatus = true; //开启加载
      }
      //添加数据
      setTimeout(() => {
        if (Math.ceil(scrollTop) + offsetHeight > scrollHeight - 1) {
          this.scroll.startSize = this.scroll.startSize + 20;
          this.scroll.endSize = this.scroll.endSize + 20;
          let startList = this.locationScrollList;
          let endList = this.locationList.slice(
            this.scroll.startSize,
            this.scroll.endSize
          );
          this.locationScrollList = startList.concat(endList);
        }
        this.scrollLoadingStatus = false; //关闭加载
      }, 1000);
    },
    resetList() {
      this.loadingStatus = true;
      this.noMoreLoading = false;
      this.scrollLoadingStatus = false; //关闭加载
      this.locationList = [];
      this.locationScrollList = [];
      this.scroll.startSize = 0;
      this.scroll.endSize = 20;
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollLocation);
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}
.statistics--siteUser {
  display: flex;
  flex-direction: column;
  ::v-deep {
    .van-popup--bottom.van-popup--round {
      background: #ffffff;
      box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.09);
      border-radius: 10px 10px 0px 0px;
    }
  }
  .totalHide {
    animation: totalHideAn 0.3s linear;
    visibility: hidden;
    margin-top: -163px;
  }
  .totalShow {
    animation: totalShowAn 0.3s linear;
    visibility: visible;
    margin-top: 0px;
  }
  @keyframes totalHideAn {
    from {
      margin-top: 0;
    }
    to {
      margin-top: -163px;
    }
  }
  @keyframes totalShowAn {
    from {
      margin-top: -163px;
    }
    to {
      margin-top: 0px;
    }
  }
  .triangle {
    margin-left: 7px;
    border-width: 4px;
    border-style: solid;
  }
  .triangle-up {
    margin-top: -4px;
    border-color: transparent transparent #999 transparent;
  }

  .triangle-down {
    margin-top: 4px;
    border-color: #999 transparent transparent transparent;
  }

  .functional {
    height: 44px;
    background: #ffffff;
    box-shadow: inset 0px 0px 0px 0px #eeeeee;
    padding: 12px 16px;
    display: flex;
    position: relative;
    @include minxi-fontstyle(14px, 400, #333333);
    .operator {
      display: flex;
      align-items: center;
    }
    .serach-icon {
      position: absolute;
      right: 10px;
      top: 12px;
    }
  }
  .location-list {
    overflow-y: scroll;
    background: #ffffff;
    box-shadow: inset 0px 0px 0px 0px #eeeeee;
    margin-left: 10px;
    border-radius: 0px 0px 0px 10px;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    position: relative;
    .location-rows {
      display: flex;
      background: #ffffff;
    }
    .left-rows {
      width: 123px;
      height: 62px;
      display: flex;
      align-items: center;
      position: sticky;
      left: 0px;
      background: #fff;
      border-bottom: 1px solid #eee;
      padding: 0 16px;
      .location-name {
        width: 60px;
        @include minxi-fontstyle(14px, 400, #1f1f1f);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .indexs {
        background: #caccd5;
        border-radius: 50%;
        @include minxi-fontstyle(10px, 400, #ffffff);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .indexs-two {
        margin-right: 13px;
        width: 18px;
        height: 18px;
      }
      .indexs-three {
        margin-right: 9px;
        width: 22px;
        height: 22px;
      }
    }
    .row {
      display: flex;
      height: 62px;
      align-items: center;
      overflow: scroll hidden;
      border-bottom: 1px solid #eee;
      .column {
        display: flex;
        flex-direction: column;
        white-space: nowrap;
        align-items: center;
        margin-right: 16px;
        .num {
          font-size: 15px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #333333;
        }
        .title {
          @include minxi-fontstyle(10px, 400, #999999);
        }
      }
    }
    & .location-rows:last-child {
      .left-rows {
        border-bottom: none;
      }
      .row {
        border-bottom: none;
      }
    }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    .row::-webkit-scrollbar {
      width: 3px;
      height: 10px;
      background-color: #fff;
    }

    /*定义滑块 内阴影+圆角*/
    .row:-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
      background-color: #dde0e4;
    }
  }
  //模拟加载数据
  .scrollLoading {
    .scrollLoadingStatus {
      text-align: center;
    }
  }
  .loadingShow {
    visibility: visible;
    opacity: 1;
  }
  .loadingHide {
    visibility: hidden;
    opacity: 0;
  }

  .location-rows:last-child .row {
    border-bottom: none;
  }
  .location-rows:last-child .row .left-rows {
    border-bottom: none;
  }
  .no-content {
    color: #969799;
    font-size: 14px;
    text-align: center;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
  }
  .no-content-loading {
    color: #969799;
    font-size: 14px;
    text-align: center;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    height: 30px;
    line-height: 30px;
    margin-bottom: 15px;
  }
}
</style>
